<template>
  <!-- 弹窗 -->
  <div class="Dialog-Calendar clmcenter">
    <div class="dialog-container">
      <div class="dialog-head">
        <div class="closebox" @click="close">
          <svg
            focusable="false"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 32 32"
            role="img"
            aria-hidden="true"
            style="width: 1rem; height: 1rem; fill: currentcolor"
          >
            <g>
              <svg viewBox="0 0 24 24">
                <path
                  d="M13.4 12l5.3-5.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 6.7 5.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l5.3 5.3-5.3 5.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l5.3-5.3 5.3 5.3c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4L13.4 12z"
                ></path>
              </svg>
            </g>
          </svg>
        </div>
      </div>
      <div class="dialog-info">
        <div class="dialog-info-contain">
          <button type="button" @click="openTo('calendar')">
            Calendar download
          </button>
          <button type="button" @click="openTo('apple')">
            Apple iCal/Calendar
          </button>
          <button type="button" @click="openTo('google')">
            Google Calendar
          </button>
          <button type="button" @click="openTo('outlook')">Outlook Web</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    close() {
      this.$emit("close");
    },
    openTo(val) {
      if (val == "outlook") {
        window.open(
          "https://mahelei.oss-cn-beijing.aliyuncs.com/2023/wanhao/2023%20GREATER%20CHINA%20HR%20CONFERENCE_outlook.ics",
          "_blank"
        );
      } else {
        window.open(
          "https://mahelei.oss-cn-beijing.aliyuncs.com/2023/wanhao/2023%20GREATER%20CHINA%20HR%20CONFERENCE.ics",
          "_self"
        );
      }
    },
  },
};
</script>
<style lang="less" scoped>
//
.Dialog-Calendar {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  .dialog-container {
    min-width: 350px;
    max-height: 60vh;
    background: #ffffff;
    border-radius: 0.25rem;
    overflow: hidden;
    .dialog-head {
      background-color: rgb(249, 246, 244);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .closebox {
        padding: 1.7rem 2.5rem 1.2rem 0;
        cursor: pointer;
      }
    }
    .dialog-info {
      width: 350px;
      background: #ffffff;
      .dialog-info-contain {
        margin: 1.2rem auto 0.5rem auto;
        button {
          width: 310px;
          height: 45px;
          color: rgb(28, 28, 28);
          border-style: none;
          border: 0;
          font-family: Arial, Helvetica, sans-serif;
          line-height: 1.3;
          font-size: 1rem;
          margin-bottom: 1rem;
          padding-left: 5.5rem;
          text-align: left;
          cursor: pointer;
        }
        button:first-child {
          background: url("../assets/img/icon_ics.svg") no-repeat center left
            50px;
        }
        button:nth-child(2) {
          background: url("../assets/img/icon_apple.svg") no-repeat center left
            50px;
        }
        button:nth-child(3) {
          background: url("../assets/img/icon_google.svg") no-repeat center left
            50px;
        }
        button:last-child {
          background: url("../assets/img/icon_outlook.svg") no-repeat center
            left 50px;
        }
      }
    }
  }
}
</style>
